<template>
	<div class="tabbar">
		<van-tabbar
			v-model="activeName" 
			active-color="#3498db" 
			inactive-color="#606468" 
			route>
			<van-tabbar-item 
				v-for="(item, index) in tabbarData"
				:icon="item.icon" 
				:key="index" 
				:name="item.name" 
				replace 
				:to="item.path">
				{{ item.title }}
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		name: 'Tabbar',
		data() {
			return {
				//激活的标签名称
				activeName: "Home",
				tabbarData: [{
						title: "首页",
						icon: "home-o",
						name: "Home",
						path: "/main/home",
					},
					{
						title: "菜单",
						icon: "orders-o",
						name: "Menu",
						path: "/main/menu",
					},
					{
						title: "购物袋",
						icon: "shopping-cart-o",
						name: "Shopbag",
						path: "/main/shopbag",
					},
					{
						title: "我的",
						icon: "friends-o",
						name: "My",
						path: "/main/my",
					},
				],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar{
		height: 50px;
	}
</style>
